<div class="layui-card">
    <div class="layui-card-header layuiadmin-card-header-auto">
        <form class="layui-form">
            <div class="layui-btn-group">
                <button id="destroyBtn" type="button" class="layui-btn layui-btn-sm layui-btn-danger" ><i class="layui-icon layui-icon-delete"></i>批量删除</button>
                <button type="submit" class="layui-btn layui-btn-sm layui-btn-normal" lay-submit lay-filter="*"><i class="layui-icon layui-icon-search"></i>搜索</button>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label for="" class="layui-form-label">呼叫时间：</label>
                    <div class="layui-input-inline" style="width: 300px">
                        <input type="text" id="calltime" name="calltime" readonly placeholder="请选择呼叫时间" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label for="" class="layui-form-label">主叫号码：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="src" placeholder="请输入主叫号码" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label for="" class="layui-form-label">被叫号码：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="dst" placeholder="请输入被叫号码" class="layui-input">
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="layui-card-body">
        <table id="dataTable" lay-filter="dataTable"></table>
        <script type="text/html" id="options">
            {{#  if(d.callsec>0){ }}
            <a href="{{d.play_url}}" target="_blank" class="layui-btn layui-btn-primary layui-btn-xs"><i class="layui-icon layui-icon-play"></i>播放</a>
            <a href="{{d.download_url}}" target="_blank" class="layui-btn layui-btn-primary layui-btn-xs"><i class="layui-icon layui-icon-download-circle"></i>下载</a>
            {{#  } }}
        </script>
    </div>
</div>


<?php
$url = yii\helpers\Url::to(['index']);
$destroy_url = yii\helpers\Url::to(['destroy']);
$js = <<<JS
    layui.use(['form','element','table', 'layer', 'laydate'],function() {
        var form = layui.form;  
        var element = layui.element;  
        var table = layui.table;  
        var layer = layui.layer;  
        var laydate = layui.laydate;
        
        var dataTable = table.render({
            elem: '#dataTable'
            ,height: 'full-200'
            ,url: '{$url}' 
            ,page: true 
            ,toolbar: false
            ,cols: [[ 
                {checkbox: true}
                ,{field: 'calltime', title: '时间'}
                ,{field: 'src', title: '主叫号码'}
                ,{field: 'dst', title: '被叫号码'}
                ,{field: 'callsec', title: '通话时长(秒)',width:120}
                ,{title: '操作', toolbar: '#options'}
            ]]
        });
        
        //监听表单提交
        form.on('submit(*)',function(data) {
            var where = data.field
            dataTable.reload({
                page : {curr : 1}
                ,where : where
            })
            return false
        })
        
        //批量删除
        $("#destroyBtn").click(function() {
            var ids = []
            var hasCheck = table.checkStatus('dataTable')
            var hasCheckData = hasCheck.data
            if (hasCheckData.length>0){
                $.each(hasCheckData,function (index,element) {
                    ids.push(element.uniqueid)
                })
            }
            if (ids.length>0){
                layer.confirm('确认激活吗？', function(index){
                    $.post("{$destroy_url}",{ids:ids},function (res) {
                        if (res.code==0){
                            dataTable.reload({page : {curr : 1}})
                        }
                        layer.close(index);
                        layer.msg(res.msg)
                    });
                })
            }else {
                layer.msg('请选择至少一项')
            }  
        })
        
        //呼叫时间范围
        laydate.render({
            elem: '#calltime'
            ,type: 'datetime'
            ,range: '-' 
        })
        
    });
JS;
$this->registerJs($js);
